<template>
	<div class="flex-warp">
		<div class="tree-list">
			<div class="title-warp">
				<h3>库房选择</h3>
				<el-button @click="datainit" type="text">刷新</el-button>
			</div>
			<el-tree
				:data="orderList"
				:props="defaultProps"
				highlight-current
				default-expand-all
				:expand-on-click-node="false"
				@node-click="handleNodeClick"
			></el-tree>
		</div>
		<cl-crud
			@load="onLoad"
			class="table"
			:on-refresh="onRefresh"
			ref="curd"
			:on-delete="rowDelete"
		>
			<el-row type="flex">
				<cl-search-key placeholder="请输入资产编号/资产名称" class="m-l-10" />
				<cl-flex1 />
			</el-row>
			<el-row>
				<cl-refresh-btn />
				<cl-add-btn class="m-r-10" />
				<div style="margin-top: 20px;" v-if="menu.name">
					<div>
						当前库房: <el-tag>{{ menu.name }}</el-tag>
					</div>
				</div>
			</el-row>
			<el-row>
				<cl-table v-bind="table" ref="table">
					<template #column-barCode="{ scope }">
						<logDialog :barCode="scope.row.barCode" :title="scope.row.barCode" />
					</template>
<template #column-quantityNum1="{ scope }">
						{{ scope.row.quantityNum - scope.row.realNum }}
					</template>
<template #slot-logs="{ scope }">
						<logDialog :barCode="scope.row.barCode" />
					</template>
</cl-table>
</el-row>

<el-row type="flex">
    <cl-flex1 />
    <cl-pagination />
</el-row>

<cl-upsert v-model="form" v-bind="upsert"></cl-upsert>
</cl-crud>
</div>
</template>

<script>
    export default {
        components: {},
        mounted() {
            this.init();
        },
        data() {
            return {
                menu: {
                    name: "",
                    id: ""
                },
                defaultProps: {
                    children: "children",
                    label: "name",
                    value: "id"
                },
                orderId: "",
                orderList: [],
                dateTime: [],
                type: "",
                orderType: "",
                visible: false,
                visibleDown: false,
                form: {},
                upsert: {},
                table: {
                    on: {
                        "row-key": "id",
                        "tree-props": {
                            children: "children",
                            hasChildren: "hasChildren"
                        }
                    },
                    props: {},
                    columns: [{
                        prop: "warname",
                        label: "资产名称",
                        align: "center",
                        "min-width": 150
                    }, {
                        prop: "name",
                        label: "库房",
                        align: "center",
                        "min-width": 150
                    }, {
                        prop: "barCode",
                        label: "资产编码",
                        align: "center",
                        "min-width": 150
                    }, {
                        prop: "specifications",
                        label: "型号规格",
                        align: "center",
                        "min-width": 150
                    }, {
                        prop: "quantityNum1",
                        label: "库房数量",
                        align: "center",
                        "min-width": 150
                    }, {
                        prop: "quantityNum",
                        label: "入库数量",
                        align: "center",
                        "min-width": 150
                    }, {
                        prop: "realNum",
                        label: "出库数量",
                        align: "center",
                        "min-width": 150
                    }, {
                        label: "操作",
                        align: "center",
                        type: "op",
                        buttons: ["slot-logs", "edit", "delete"]
                    }]
                }
            };
        },

        methods: {
            async datainit() {
                this.orderId = "";
                this.menu = Object.assign({});
                this.$refs.curd.refresh();
                const data = await this.$service.order.page();
                this.orderList = data.list;
            },
            rowDelete(selection, {
                next
            }) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    next({
                        ids: selection.map(res => {
                            return res.id;
                        })
                    });
                });
            },
            async init() {
                this.datainit();
                this.upsert = {
                    props: {
                        width: "800px"
                    },
                    items: [{
                        prop: "warname",
                        label: "资产名称",
                        span: 12,
                        component: {
                            name: "el-input",
                            props: {
                                placeholder: "请填写资产名称"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "资产名称不能为空"
                        }]
                    }, {
                        prop: "specifications",
                        label: "型号规格",
                        span: 12,
                        component: {
                            name: "el-input",
                            props: {
                                placeholder: "请填写型号规格"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "型号规格不能为空"
                        }]
                    }, {
                        prop: "orderId",
                        label: "库房",
                        span: 12,
                        component: {
                            name: "menuSelect",
                            props: {
                                placeholder: "请填写资产名称"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "资产名称不能为空"
                        }]
                    }, {
                        prop: "barCode",
                        label: "资产编号",
                        span: 12,
                        component: {
                            name: "el-input",
                            props: {
                                placeholder: "请填写库存数量"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "资产编码不能为空"
                        }]
                    }, {
                        prop: "quantityNum",
                        label: "入库数量",
                        span: 12,
                        component: {
                            name: "el-input",
                            type: "number",
                            props: {
                                placeholder: "请填写入库数量"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "库存数量不能为空"
                        }]
                    }, {
                        prop: "realNum",
                        label: "出库数量",
                        span: 12,
                        hidden: ":isAdd",
                        component: {
                            name: "el-input",
                            type: "number",
                            props: {
                                placeholder: "请填写出库数量"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "出库数量不能为空"
                        }]
                    }]
                };
            },
            handleNodeClick(row) {
                this.orderId = row.id;
                this.menu = Object.assign({}, row);
                this.$refs.curd.refresh();
            },
            async onRefresh(params, {
                next,
                render
            }) {
                let {
                    list
                } = await next({
                    ...params,
                    orderId: this.orderId
                });
                render(list);
            },
            onLoad({
                app,
                ctx
            }) {
                ctx.service(this.$service.warehouse).done();
                app.refresh();
            }
        }
    };
</script>

<style lang="scss">
    .m-l-10 {
        margin-left: 10px;
    }
    
    .m-r-10 {
        margin-right: 10px;
    }
    
    .sort-warp {
        height: 80vh;
    }
    
    .sure {
        float: right;
        margin-top: 10px;
    }
    
    .flex-warp {
        display: flex;
        width: 100%;
        height: 100%;
        .tree-list {
            width: 300px;
            height: 100%;
            background: #fff;
            margin-right: 10px;
            padding: 10px;
            /deep/.el-tree-node__content {
                font-size: 16px;
            }
        }
        .table {
            width: calc(100% - 310px);
            flex: 1;
        }
    }
    
    .title-warp {
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
</style>